<template>
  <div>
    <a-popover :trigger="trigger" placement="bottomLeft" v-model="visible">
      <template slot="title">
        <a-input-search v-model="searchValue" placeholder="输入英文关键词进行搜索" @change="filterIcon" />
      </template>

      <template slot="content">
        <div class="icon-box">
          <div @click="handleClick(null)" class="icon-content">
            <i style="font-size: 18px;">无</i>
            <!-- <component :is="$antIcons[item]" /> -->
          </div>
          <div
            v-for="(item, index) in iconArr"
            :key="item + index"
            @click="handleClick(item)"
            class="icon-content"
            :style="{ background: icon === item ? '#268961' : '' }"
          >
            <a-icon :type="item" style="font-size: 18px;" />
            <!-- <component :is="$antIcons[item]" /> -->
          </div>
        </div>
      </template>
      <slot name="iconSelect"></slot>
    </a-popover>
  </div>
</template>

<script>
import VueIcon from '@ant-design/icons-vue'
const icons = VueIcon.definitions.collection
export default {
  name: 'IconPicker',
  props: {
    icon: {
      type: String
    },
    // 自定义触发方式
    trigger: {
      type: String,
      default: 'click',
      validator: function(value) {
        return ['click', 'hover', 'focus'].indexOf(value) !== -1
      }
    }
  },
  data() {
    return {
      visible: false,
      iconArr: [],
      searchValue: '',
      theme: 'outline',
      iconarr: []
    }
  },
  mounted() {
    this.iconarr = Object.values(icons)
      .filter(t => t.theme == this.theme)
      .map(i => i.name)
    this.iconArr = this.iconarr
  },
  methods: {
    handleClick(icon) {
      this.$emit('updateIcon', icon)
      this.visible = false
    },
    filterIcon() {
      if (this.searchValue) {
        this.iconArr = this.iconarr.filter(item => item.toLowerCase().includes(this.searchValue.toLowerCase()))
      } else {
        this.iconArr = this.iconarr
      }
    }
  },
  watch: {
    visible(val, old) {
      this.searchValue = ''
      this.iconArr = this.iconarr
    }
  }
}
</script>

<style scoped>
.icon-box {
  overflow: auto;
  font-size: 20px;
  width: 250px;
  height: 230px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: center;
}

.icon-content {
  width: 45px;
  height: 40px;
  margin: 5px;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.icon-content:hover {
  background: #1890ff;
}
</style>
